<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>账户信息</title>
    <meta name="keywords" content="">
    <meta name="description" content="">

    <link rel="shortcut icon" href="favicon.ico">
    <link href="/hadmin/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="/hadmin/css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <!-- Data Tables -->
    <link href="/hadmin/css/plugins/bootstrap-table-n/bootstrap-table.min.css" rel="stylesheet">

    <!-- Sweet Alert -->
    <link href="/hadmin/css/plugins/sweetalert/sweetalert.css" rel="stylesheet">

    <link href="/hadmin/css/plugins/chosen/chosen.css" rel="stylesheet">

    <link href="/hadmin/css/animate.css" rel="stylesheet">
    <link href="/hadmin/css/style.css?v=4.1.0" rel="stylesheet">
    <link href="/hadmin/css/plugins/toastr/toastr.min.css" rel="stylesheet">
</head>
<body>
<div >
    <div class="ibox-heading" id="dpm">
        <div class="row" v-show="showcon">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-content">
                        <form role="form" class="form-inline">
                            <div class="form-group">
                                <label for="con" class="sr-only">员工姓名</label>
                                <input type="text" placeholder="请输入员工姓名或身份证号" id="con" class="form-control">
                            </div>
                            <div class="form-group">
                                <label for="st" >状态</label>
                                <select class="form-control" name="st" id="st" >
                                    <option value="">全部</option>
                                    <option value="0">试用期</option>
                                    <option value="1">在职</option>
                                    <option value="-1">离职</option>
                                </select>
                            </div>


                            <button class="btn btn-white" type="button" id="ser"><i class="fa fa-search"></i>查询</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="ibox-content" >
        <div id="toolbar" class="btn-group">
            <button class="btn btn-info " type="button" id="clogin"><i class="fa fa-plus"></i>&nbsp;添加</button>
            <button class="btn btn-info " type="button" id="del"><i class="fa fa-trash"></i>&nbsp;删除</button>
            <button class="btn btn-primary " type="button" id="sea"><i class="fa fa-chrome"></i></button>
        </div>
        <div class="row">
            <table class="table table-striped table-bordered table-hover " id="editable">
            </table>
        </div>
    </div>


    <!--添加 -->
    <div class="modal fade" style="width: 90%"  id="addlogin" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog" style="width: 90%">
            <div class="modal-content" style="width: 90%" >
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">账户信息录创建</h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-sm-12">
                            <div class="ibox float-e-margins">
                                <div class="ibox-content">
                                    <div class="row">
                                        <div class="col-sm-12">
                                            <form class="form-horizontal" id="sloginform">
                                                <div class="form-group">
                                                    <label class="col-sm-3 control-label">账户名：</label>

                                                    <div class="col-sm-8">
                                                        <input type="text" required placeholder="账户名" v-model="loginform.uname" name="uname" id="adduname" class="form-control">
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label class="col-sm-3 control-label">密码：</label>
                                                    <div class="col-sm-8">
                                                        <input type="password" required placeholder="密码" v-model="loginform.password" name="password" id="addpassword" class="form-control">
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label class="col-sm-3 control-label">账户类型：</label>
                                                    <div class="col-sm-8">
                                                        <select class="form-control" name="type" v-model="loginform.type" id="addtype">
                                                            <option value="">请选择账户类型</option>
                                                            <option value="0">系统账户</option>
                                                            <option value="1">个人账户</option>
                                                        </select>
                                                        <span class="help-block m-b-none">系统账户无需关联员工信息，个人账户与员工信息对应</span>
                                                    </div>

                                                </div>
                                                <div class="form-group" v-show="loginform.type == '0'">
                                                    <label class="col-sm-3 control-label">姓名：</label>
                                                    <div class="col-sm-8">
                                                        <input type="text" required placeholder="姓名" v-model="loginform.name" name="name" id="addname"class="form-control">
                                                    </div>
                                                </div>
                                                <div class="form-group" v-show="loginform.type == '1'">
                                                    <label class="col-sm-3 control-label">身份证号：</label>
                                                    <div class="col-sm-8">
                                                        <input type="text" required placeholder="身份证号" v-model="loginform.idcard" name="idcard" id="addidcard"class="form-control">
                                                    </div>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="addbtn" @click="savelogin">提交</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>

</div>

</body>
<!-- 全局js -->
<script src="/hadmin/js/jquery.min.js?v=2.1.4"></script>
<script src="/hadmin/js/bootstrap.min.js?v=3.3.6"></script>

<!-- 自定义js -->
<script src="/hadmin/js/content.js?v=1.0.0"></script>


<!-- Data Tables -->
<script src="/hadmin/js/plugins/bootstrap-table-n/bootstrap-table.min.js"></script>
<script src="/hadmin/js/plugins/bootstrap-table-n/locale/bootstrap-table-zh-CN.min.js"></script>

<!-- layerDate plugin javascript -->
<script src="/hadmin/js/plugins/layer/laydate/laydate.js"></script>

<!-- jQuery Validation plugin javascript-->
<script src="/hadmin/js/plugins/validate/jquery.validate.min.js"></script>
<script src="/hadmin/js/plugins/validate/messages_zh.min.js"></script>

<script src="/hadmin/js/demo/form-validate-demo.js"></script>

<!-- Toastr script -->
<script src="/hadmin/js/plugins/toastr/toastr.min.js"></script>

<!-- Sweet alert -->
<script src="/hadmin/js/plugins/sweetalert/sweetalert.min.js"></script>

<script src="/hadmin/js/plugins/chosen/chosen.jquery.js"></script>



<script src="/vue/vue.js"></script>
<script src="/vue/axios.min.js"></script>
<script src="/vue/axios-tools.js"></script>

<script>

    //表单转化
    var transformToJson = function(formData){
        var obj={}
        for (var i in formData) {
            /*[{"name":"user","value":"hpc"},{"name":"pwd","value":"123"},{"name":"sex","value":"M"},{"name":"age","value":"100"},{"name":"phone","value":"13011112222"},{"name":"email","value":"xxx@xxx.com"}]
            */
            //下标为的i的name做为json对象的key，下标为的i的value做为json对象的value
            obj[formData[i].name]=formData[i]['value'];
        }
        return obj;
    }

    $(function () {
        //弹出添加页面
        $('#clogin').click(function () {
            $('#addlogin').modal('show')
        })

        jQuery.validator.addMethod("regex",function(value, element, params){  //扩展方法示例:　　　　　　　　　　　
            var exp = new RegExp(params); //params rules的value传入的正则表达式
            return exp.test(value);       //value  被验证的input传入的值
        },"输入格式有误");

        //添加账户信息检校
        var loginvali = $("#sloginform").validate({
            rules: {
                uname: {
                    required: true,
                    minlength: 4,
                    maxlength:16,
                    regex: '/^[a-zA-Z0-9_-]{4,16}$/'
                },
                password: {
                    required: true,
                    minlength: 6,
                    regex: '/^.*(?=.{6,})(?=.*\\d)(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*? ]).*$/'
                },
                type: {
                    required: true
                }
            },
            messages: {
                uname: {
                    required: '请输入账户名',
                    minlength: '长度不小于4',
                    maxlength:'长度不大于16',
                    regex: '账户名包含字母，数字，下划线，减号，以字母开头'
                },
                password: {
                    required: '请输入密码',
                    minlength: '密码最少6位',
                    regex: '密码包括至少1个大写字母，1个小写字母，1个数字，1个特殊字符'
                },
                type: {
                    required: '请选择账户类型'
                }
            }
        });

        var loginApp = new Vue({
            el: '#addlogin',
            data: {
                loginform: {
                    uname: '',
                    name: '',
                    password: '',
                    type: '',
                    idcard: ''
                }
            },
            methods: {
                savelogin(){
                    //todo 验证有问题
                    if(loginvali.form()){
                        axiosconfig({
                            url: '/personnel/sys/logininfo',
                            method: 'post',
                            data: this.loginform,
                            succ: function (back) {
                                console.info(back)
                                $('#addlogin').modal('hide')
                            }
                        })
                    }
                }
            }
        })


    });


</script>
</html>